<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
	<meta name="decorator" content="common" />
<script>
$(function(){
	$(".parts_menus_title li").click(function(){
		$(".parts_menus_title li").removeClass('part_on');
		$(this).addClass("part_on");
		//alert($(this).index());
		showIndex=$(this).index();
		$(".parts_menus_tab").hide();
		$(".parts_menus_tab").eq(showIndex).show();
	});
	$(".parts_english a").click(function(){
		$(this).parents(".parts_menus_brand").find("a").removeClass("on_e");
		$(this).addClass("on_e");
	});
	$(".parts_menus_brand_list_one p a").click(function(){
		$(this).parents(".parts_menus_brand_list_one").find("a").removeClass("on1");
		$(this).addClass("on1");
	});
	$(".parts_menus_brand_item_info a").click(function(){
		$(this).parents(".parts_menus_brand_item_info").find("a").removeClass("on2");
		$(this).addClass("on2");
	});
	$(".parts_menus_title a").first().click();
	$('#carPartListNav').addClass("on");
	$('#searchBox').hide();
})

function selectBarandCode(barandCode){
	var id="carBarand_"+barandCode;
	$("div[id*='carBarand_']").hide();
	$("figure[id*='carTypeCh_']").hide();
	$("div[id*='carType_']").hide();
	$("ul[id*='carCode_']").hide();
	$('#'+id).show();
	//默认加载第一列首字母
	$("a[id*='carTypeChClick_"+barandCode+"']").first().click();
	//默认第一列大类
	var carTypeCh=$("a[id*='carTypeChClick_"+barandCode+"']").first().text();
	$("a[id*='carTypeClick_"+barandCode+"_"+carTypeCh+"']").first().click();
	//默认第一列车型
	var carType=$("a[id*='carTypeClick_"+barandCode+"_"+carTypeCh+"']").first().attr("value");
	$("a[id*='carCodeClick_"+barandCode+"_"+carTypeCh+"_"+carType+"']").first().click();
	
}

function selectCarTypeCh(carTypeCh,carBarand){
	var id="carTypeCh_"+carBarand+"_"+carTypeCh;
	$("figure[id*='carTypeCh_']").hide();
	$("div[id*='carType_']").hide();
	$("ul[id*='carCode_']").hide();
	$('#'+id).show();
	//默认第一列大类
	$("a[id*='carTypeClick_"+carBarand+"_"+carTypeCh+"']").first().click();
	//默认第一列车型
	var carType=$("a[id*='carTypeClick_"+carBarand+"_"+carTypeCh+"']").first().attr("value");
	$("a[id*='carCodeClick_"+carBarand+"_"+carTypeCh+"_"+carType+"']").first().click();
	
}

function selectCarType(carType,carTypeCh,carBarand){
	var id="carType_"+carBarand+"_"+carTypeCh+"_"+carType;
	$("div[id*='carType_']").hide();
	$("ul[id*='carCode_']").hide();
	$('#'+id).show();
	//默认第一列车型
	$("a[id*='carCodeClick_"+carBarand+"_"+carTypeCh+"_"+carType+"']").first().click();
}

function selectCarCode(carCode,carType,carTypeCh,carBarand){
	var id="carCode_"+carBarand+"_"+carTypeCh+"_"+carType+"_"+carCode;
	$("ul[id*='carCode_']").hide();
	$('#'+id).show();
}

function searchVinFunc(){
	//var carBarand=$("#selectCarBarand  option:selected").val();
	var vin=$("#vinValue").val();
	$("#autoBtn").empty();
	if(vin!=""){
		var param="vin="+vin;
		$.ajax({
			url:"${ctxWeb}/partList/getCarInfoByVin?"+param,
			async:false,
			success:function(result){
				var carList = result.carList;
				var html = ''; 
				html += '<table class="right_table"><tbody>';
				$(carList).each(function(v,e){
					html += '<tr>';
					html += '<td>'+e.carBarand+'</td>';
					html += '<td>'+e.carCode+'</td>';
					html += '<td>'+e.carYear+'</td>';
					html += '<td>'+e.market+'</td>';
					html += '<td><a href="/epc/showProdmy.do?prodmyId='+e.prodmyId+'">智能匹配进入EPC</a></td>';
					html += '</tr>';
				})
				html += '</tbody></table>'
				$('#autoBtn').append(html);
				$('#searchVinAuto').show();
				/* if(result.brand=="bmw"){
					$.ajax({
						url:"${ctxWeb}/epc/searchVin.do",
						dataType:"json",
						data: {
							"vin":vin,
							"brandCode":result.brand
						},
						success:function(result){
							if(result.prodmyId!=null){
								//var autoVin='<a href="/epc/showProdmy.do?prodmyId='+result.prodmyId+'&vin='+vin+'" style="font-size: 16px;padding: 5px 10px;border-radius: 4px;background: #D3001E; color: #fff;margin-top: 72px;display: block;">智能匹配进入EPC</a>'
								$('#autoBtn').append(html);
								$('#searchVinAuto').show();
								//$('#searchVinAuto').innerHTML="1weqeqweqweqwewq";
							}else{
								$('#searchVinAuto').hide();
							}
						}
					});
				} */
				
				$("#carInfoBox").empty();
				if(result.code==1){
					$("#carInfoEmpty").hide();
					$("#searchBox").show();
					$("#carInfoBox").html("<h3><em>VIN:</em><span>"+result.vin+"</span></h3><p class='clearfix'><em>品牌:</em><span>"+result.name+"</span></p><p class='clearfix'><em>英文名:</em><span>"+result.brand+"</span></p><p class='clearfix'><em>详情介绍:</em><span>"+result.mains+"</span></p>");
					$("#carImg").attr("src", result.imglogo);
				}else{
					$("#carInfoEmpty").show();
					$("#searchBox").hide();
				}
			}
		});
	}else{
		alert("请输入VIN码进行查询");
	}
}

</script>
<style>
.right_table{border:1px solid #ddd;width:100%;}
.right_table td{border:1px solid #ddd;padding:5px;}
.right_table td a{text-decoration: underline;color:#D3001E;}
</style>
</head>
<body>

	<!--主题内容-->
	<div class="parts_main_box bgf5">
		<div class="container">
			<div class="row">
				<!-- 配件目录 -->
				<div class="parts_menus_box">
					<div class="search_list_com clearfix">
						<%-- <p>
							<label>品牌</label>
							<select class="hy1"  id="selectCarBarand" style="width: 218px;background-size: 32px 40px;">
								<option value="all">请选择品牌</option>
								<c:forEach items="${carBarandList}" var="carBarand">
									<option value="${carBarand.brand}">${carBarand.brandCn}</option>
								</c:forEach>
							</select>
						</p> --%>
						<p>
							<label>VIN</label>
							<input type="text" placeholder="请输入VIN码" id="vinValue"/>
						</p>
						<p class="search_last">
							<a href="javascript:void(0)" onclick="searchVinFunc()" class="search_btn_bd">搜索</a>
						</p>
					</div>
					<div class="clear"></div>
					
					<!--搜索结果-->
					<div class="parts_result_box clearfix" id="searchBox" style="display: none;">
						<div class="parts_result_left" id="carInfoBox">
							
						</div>
						<div class="parts_result_right" style="text-align:center" >
							<img src="${ctxWebStatic}/images/result_img.png" alt="" id="carImg"/>
							<div id="searchVinAuto" style="display: none;">
								<div id="autoBtn"></div>
							</div>
						</div>
					</div>
					<div class="parts_result_box clearfix" style="display: none;" id="carInfoEmpty">
						<div class="result_box result_search_box" style="padding-bottom: 10%;">
							<img src="${ctxWebStatic}/images/att_error.png" alt="" />
							<span>抱歉，没有找到相关VIN码信息</span>
						</div>
					</div>
					<!--搜索结果结束-->
					
					<!--目录切换-->
					<div class="parts_menus">
						<!--目录头部-->
						<div class="parts_menus_title">
							<ul class="clearfix">
								<c:forEach items="${carInfo}" var="carBarand">
									<li>
										<a href="javascript:void(0)" onclick="selectBarandCode('${carBarand.carBarandCode}')" value="${carBarand.carBarandCode}">${carBarand.carBarand}</a>
									</li>
								</c:forEach>
							</ul>
						</div>
						<!--目录头部结束-->
						<!--目录切换内容-->
						<div class="parts_menus_yb">
							<!--大众-->
							<c:forEach items="${carInfo}" var="carBarand">
								<div class="parts_menus_tab" id="carBarand_${carBarand.carBarandCode}" style="display: none;">
									<div class="parts_menus_brand">
										<figure class="parts_english clearfix">
											<!-- <a href="javascript:void(0)" class="on_e">
												A
												<i></i>
											</a> -->
											<c:forEach items="${carBarand.childList}" var="carTypeCh">
												<a href="javascript:void(0)" onclick="selectCarTypeCh('${carTypeCh.carTypeCh}','${carBarand.carBarandCode}')" id="carTypeChClick_${carBarand.carBarandCode}_${carTypeCh.carTypeCh}">${carTypeCh.carTypeCh}<i></i></a>
											</c:forEach>
										</figure>
										<div class="parts_menus_brand_list">
											<c:forEach items="${carBarand.childList}" var="carTypeCh">
												<figure class="parts_menus_brand_list_one clearfix" id="carTypeCh_${carBarand.carBarandCode}_${carTypeCh.carTypeCh}" style="display: none;">
													<em>车型:</em>
													<p>
														<!-- <a href="javascript:void(0)" class="on1">上海大众桑塔纳</a>  -->
														<c:forEach items="${carTypeCh.childList}" var="carType">
															<c:if test="${carTypeCh.carTypeCh==carType.carTypeCh }">
																<a href="javascript:void(0)" onclick="selectCarType('${carType.carTypeUUID}','${carTypeCh.carTypeCh}','${carBarand.carBarandCode}')" id="carTypeClick_${carBarand.carBarandCode}_${carTypeCh.carTypeCh}_${carType.carTypeUUID}" value="${carType.carTypeUUID}">${carType.carType}</a>
															</c:if>
														</c:forEach>
													</p>
												</figure>
												<c:forEach items="${carTypeCh.childList}" var="carType">
												<div class="parts_menus_brand_item" id="carType_${carBarand.carBarandCode}_${carTypeCh.carTypeCh}_${carType.carTypeUUID}" style="display: none;">
													<ul class="clearfix">
														<li class="parts_menus_brand_item_fist">
															<em>车型:</em>
														</li>
														<li class="parts_menus_brand_item_info clearfix">
															<!-- <a href="javascript:void(0)" class="on2">上海大众桑塔纳</a>  -->
															<c:forEach items="${carType.childList}" var="carCode">
																<c:if test="${carType.carType==carCode.carType }">
																	<a href="javascript:void(0)" onclick="selectCarCode('${carCode.carCodeUUID}','${carType.carTypeUUID}','${carTypeCh.carTypeCh}','${carBarand.carBarandCode}')" id="carCodeClick_${carBarand.carBarandCode}_${carTypeCh.carTypeCh}_${carType.carTypeUUID}_${carCode.carCodeUUID}">${carCode.carCode}</a>
																</c:if>
															</c:forEach>
														</li>
													</ul>
													<c:forEach items="${carType.childList}" var="carCode">
													<ul class="clearfix" id="carCode_${carBarand.carBarandCode}_${carTypeCh.carTypeCh}_${carType.carTypeUUID}_${carCode.carCodeUUID}" style="display: none;">
														<li class="parts_menus_brand_item_fist">
															<em>年份:</em>
														</li>
														<li class="parts_menus_brand_item_info time_info clearfix">
															<!-- <a href="javascript:void(0)" class="on2">2010</a>  -->
															<c:forEach items="${carCode.childList}" var="carYear">
																<c:if test="${carCode.carCode==carYear.carCode }">
																	<a href="${ctxWeb}/epc/showProdmy.do?prodmyId=${carYear.prodmyId}">${carYear.carYear}(${carYear.market})</a>
																</c:if>
															</c:forEach>
														</li>
													</ul>
													</c:forEach>
												</div>
												</c:forEach>
											</c:forEach>
										</div>
									</div>
								</div>
							</c:forEach>
							<!--大众结束-->
							
						</div>
						<!--目录切换内容结束-->
					</div>
					<!--目录切换结束-->
				</div>
				<!-- 配件目录 end -->
			</div>
		</div>
	</div>
	<!--主题内容-->
</body>
</html>